<template>
  <div id="app">
    <el-container>
      <el-header>顶部公司信息和登录人信息</el-header>
      <el-container>
        <el-aside width="280px">
          <el-menu router :default-active="$route.path">
            <el-menu-item v-for="e in routes" :key="e.path" :index="e.path">
              <template slot="title">
                <span style="color: rgba(44,80,216,0.54)">{{e.title}}</span>
              </template>
            </el-menu-item>
          </el-menu>
  <!--        <el-menu router :default-active="$route.path">
            <el-menu-item index="/monday">
              <template slot="title">
                <span>星期一</span>
              </template>
            </el-menu-item>
            <el-submenu index="1-1">
              <template slot="title">
                <span>月份页面</span>
              </template>
                <el-menu-item index="/august">
                  <template slot="title">
                    <span>八月份</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="/september">
                  <template slot="title">
                    <span>九月份</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="/october">
                  <template slot="title">
                    <span>十月份</span>
                  </template>
                </el-menu-item>
            </el-submenu>
          </el-menu>-->
          <!--          <router-link to="/">Home</router-link>-->
          <!--          <router-link to="/about">About</router-link>-->
          <!--          <router-link to="/anyOne">AnyOne</router-link>-->
          <!--          <router-link to="/someOne">SomeOne</router-link>-->
          <!--          <router-link to="/monday">Monday</router-link>-->
          <!--          <router-link to="/friday">Friday</router-link>-->
          <!--          <router-link to="/august">August</router-link>-->
          <!--          <router-link to="/september">September</router-link>-->
          <!--          <router-link to="/october">October</router-link>-->
          <!--          <router-link to="/fatherSon">FatherSon</router-link>-->
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { routes } from "@/router";
export default {
  data() {
    return {
      sampleD: "value",
      routes,
    };
  },
  created() {
    this.$store.dispatch("getProfessionTypes");
  }
};
</script>
<!-- float布局 position布局 flex布局 栅格布局-直接使用组件成品-->
<style lang="scss" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100vh;
  overflow: hidden;
}

.el-header {
  background-color: rgba(216, 81, 56, 0.71);
}
.el-aside {
  background-color: rgba(83, 216, 196, 0.71);
  min-height: 600px;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  a {
    margin-top: 20px;
  }
}
.el-main {
  background-color: rgba(198, 216, 49, 0.6);
  min-width: 1000px;
  overflow: auto;
}
</style>
